<template>
  <div>
    <div  style="height:100px;margin: 20px 20px;border: 1px solid #c2c0c0;padding: 20px">
      <div style="margin-bottom: 20px">常规单选</div>
      <el-radio-group @input="changeValue" v-model="radio">
        <el-radio :label="3" >备选项</el-radio>
        <el-radio :label="9">备选项</el-radio>
        <el-radio :label="3" disabled >备选项</el-radio>
        <el-radio :label="6" disabled>备选项</el-radio>
      </el-radio-group>
    </div>

    <div  style="height:120px;margin: 20px 20px;border: 1px solid #c2c0c0;padding: 20px">
      <div style="margin-bottom: 20px">单选边框</div>
      <el-radio-group v-model="radio1">
        <el-radio :label="3" border>备选项</el-radio>
        <el-radio :label="9" border>备选项</el-radio>
        <el-radio :label="3" disabled border>备选项</el-radio>
        <el-radio :label="6" disabled border>备选项</el-radio>
      </el-radio-group>
    </div>

    <div  style="height:320px;margin: 20px 20px;border: 1px solid #c2c0c0;padding: 20px">
      <div style="margin-bottom: 20px">单选图片</div>
      <szrz-RadioButton v-model="radio2" :optionList="optionList"></szrz-RadioButton>
    </div>

    <div  style="height:520px;margin: 20px 20px;border: 1px solid #c2c0c0;padding: 20px">
      <div style="margin-bottom: 20px">单选列表</div>
      <szrz-RadioButton @input="szrzInput" v-model="radio3" :optionList="optionList" description="description"></szrz-RadioButton>
    </div>


  </div>
</template>

<script>
export default {
  name: 'RadioButton',
  data() {
    return {
      radio: 3,
      radio1: 3,
      radio2: '14324234',
      radio3: '14324234',
      optionList: [
        {
          label: '14324234',
          imgSrc: require("@/assets/image/medium.png"),
          description: 'New York City, the most populous city in the United States, \n' +
            'located in the state of New York.',
          disabled: true
        },
        {
          label: 'Chicago',
          imgSrc: require("@/assets/image/medium.png"),
          description: 'New York City, the most populous city in the United States, \n' +
            'located in the state of New York.'
        },
        {
          label: 'New York',
          imgSrc: require("@/assets/image/medium.png"),
          description: 'New York City, the most populous city in the United States, \n' +
            'located in the state of New York.'
        }
      ]
    }
  },
  watch: {
    radio2: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    changeValue(val) {
      console.log(val, 'changeVal')
    },
    szrzInput(val) {
      console.log(val, 'szrzInput')
    }
  }
}
</script>
<style lang="less" scoped></style>
<style></style>
